<template>
  <!-- 案件基本信息弹窗 -->
  <el-dialog
    :title="caseCode"
    append-to-body
    :close-on-click-modal="false"
    :modal="false"
    top="6rem"
    custom-class="el-dragable-dialog default-on-right"
    v-el-drag-dialog
    :visible.sync="showCaseInfoDialog"
  >
    <div v-loading="CaseBaseInfoLoading">
      <div class="case-info-swiper">
        <div class="swiper-container caseInfoSwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide" v-for="(item,index) in CaseBaseInfo.images" :key="index">
              <a :href="item" target="_blank">
                <img class="case-info-img" :src="item" />
              </a>
            </div>
          </div>
          <!-- Add Pagination -->
          <div class="swiper-pagination"></div>
        </div>
      </div>
      <ul class="main-info-list p20">
        <li class="main-info-item">
          <div class="main-info-item-label">当前阶段</div>
          <div class="main-info-item-value">{{CaseBaseInfo.stage}}</div>
        </li>
        <li class="main-info-item">
          <div class="main-info-item-label">监督员</div>
          <div class="main-info-item-value">{{CaseBaseInfo.monitor}}</div>
        </li>
        <li class="main-info-item">
          <div class="main-info-item-label">问题来源</div>
          <div class="main-info-item-value">{{CaseBaseInfo.source}}</div>
        </li>
        <li class="main-info-item">
          <div class="main-info-item-label">问题类型</div>
          <div class="main-info-item-value">{{CaseBaseInfo.type}}</div>
        </li>
        <li class="main-info-item">
          <div class="main-info-item-label">大类名称</div>
          <div class="main-info-item-value">{{CaseBaseInfo.lv1Name}}</div>
        </li>
        <li class="main-info-item">
          <div class="main-info-item-label">小类名称</div>
          <div class="main-info-item-value">{{CaseBaseInfo.lv2Name}}</div>
        </li>
        <li class="main-info-item">
          <div class="main-info-item-label">所属街道</div>
          <div class="main-info-item-value">{{CaseBaseInfo.street}}</div>
        </li>
        <li class="main-info-item">
          <div class="main-info-item-label">所属社区</div>
          <div class="main-info-item-value">{{CaseBaseInfo.community}}</div>
        </li>
        <li class="main-info-item">
          <div class="main-info-item-label">所属网格</div>
          <div class="main-info-item-value">{{CaseBaseInfo.gridding}}</div>
        </li>
        <li class="main-info-item">
          <div class="main-info-item-label">上报时间</div>
          <div class="main-info-item-value">{{CaseBaseInfo.appearDate}}</div>
        </li>
        <li class="main-info-item">
          <div class="main-info-item-label">事发位置</div>
          <div class="main-info-item-value">{{CaseBaseInfo.location}}</div>
        </li>
        <li class="main-info-item">
          <div class="main-info-item-label">问题描述</div>
          <div class="main-info-item-value">{{CaseBaseInfo.description}}</div>
        </li>
      </ul>
    </div>
  </el-dialog>
  <!-- end 案件基本信息弹窗 -->
</template>

<script>
/*
   功能模块  案件基本信息
   创建人    zgf
   更新时间  2020/04/14
   备注
*/
import elDragDialog from "@/directive/el-drag-dialog"; // base on element-ui
export default {
  name: "CaseBaseInfo",
  directives: { elDragDialog },
  props:{
    value:{
      type:Boolean,
      default:false
    },
    caseId:{
      type:Number,
      default: 0
    },
    caseCode:{
      type:String,
      default:''
    },
    recid: {
      type: Number,
      default:0
    }
  },
  data() {
    return {
      showCaseInfoDialog: false,
      CaseBaseInfo: {},
      caseInfoSwiper:null,
      CaseBaseInfoLoading:false
    };
  },
  watch:{
    value(newVal){
      this.showCaseInfoDialog = newVal
    },
    showCaseInfoDialog(newVal){
      this.$emit('input',newVal)
    },
    caseId(newVal){
      if(newVal){
        //this.getCaseBaseInfo()
        this.$http.get(this.baseUrl.searchByRecUrl, {
          params: {
            recid: newVal
          }
        }).then((rel)=>{
          let images = []
          debugger
          if(rel.data.img){
            for(let i in rel.data.img["附件"]){
              images.push(this.baseUrl.imgPath + rel.data.img["附件"][i].filepath)
            }
            for(let j in rel.data.img["处置附件"]){
              images.push(this.baseUrl.imgPath + rel.data.img["处置附件"][j].filepath)
            }
            for(let k in rel.data.img["核实附件"]){
              images.push(this.baseUrl.imgPath + rel.data.img["核实附件"][k].filepath)
            }
            for(let m in rel.data.img["核查附件"]){
              images.push(this.baseUrl.imgPath + rel.data.img["核查附件"][m].filepath)
            }
            for(let n in rel.data.img["签字文件"]){
              images.push(this.baseUrl.imgPath + rel.data.img["签字文件"][n].filepath)
            }
          }
          this.CaseBaseInfo = {
            stage:  rel.data.ACTDEFNAME==undefined?'结案':rel.data.ACTDEFNAME+"阶段",
            monitor: rel.data.HUMANNAME,
            source: rel.data.WTLY,
            type: rel.data.WTLX,
            lv1Name: rel.data.DL,
            lv2Name: rel.data.XL,
            street: rel.data.JD,
            community: rel.data.SQ,
            gridding: rel.data.WG,
            appearDate: rel.data.SBSJSTR,
            location: rel.data.WZ,
            description: rel.data.WTMS,
            images:images
          };
          this.CaseBaseInfoLoading = false;
        }).catch((e)=>{
          console.log(e)
        })
      }
    }
  },
  mounted() {
    this.showCaseInfoDialog = this.value
  },
  methods: {
    //事件基本信息-图片轮播
    caseInfoSwiperInit() {
      if (this.caseInfoSwiper) this.caseInfoSwiper.destroy(false);
      this.caseInfoSwiper = new Swiper(".caseInfoSwiper", {
        pagination: {
          el: ".caseInfoSwiper .swiper-pagination",
          dynamicBullets: true,
          autoplay: {
            delay: 2000,
            stopOnLastSlide: false,
            disableOnInteraction: false
          }
        }
      });
    },
    //获取某事件的基本信息
    getCaseBaseInfo() {
      console.log('案件id',this.caseId);
      this.CaseBaseInfoLoading = true;
      setTimeout(() => {
        this.CaseBaseInfoLoading = false;

        this.$nextTick(()=>{
          this.caseInfoSwiperInit()
        })
      }, 1000);
    },
  }
};
</script>

<style lang="less">
@import "../../css/mixin.less";
.caselist-swiper {
  height: calc(100vh - 16rem);
}
.caseInfoSwiper{
  width: 100%;
  height: 180px;
  .case-info-img{
    width: 100%;
    height: 180px;
    object-fit: cover;
  }
}
</style>
